// 购买订单管理
Vue.component('one', {
    template: '#tmp1',
    data() {
        return {
            cancelFlag: false,
        }
    },
    mounted() {
        $(document).ready(function () {
            $("#one").addClass("aBorder"); // 切换组件时，a标签的下划线

            // 通过切换类，来设置单个订单的选中和未选中状态
            $(".imgContainerG").click(function () {
                $(this).toggleClass("imgContainerR");
            });
            // 设置在文字过多时使用省略号代替
            var pText = $(".rightContentLeft > p");
            for (var i = 0; i < pText.length; i++) {
                if (pText[i].innerHTML.length > 40) {
                    console.log(pText[i].innerHTML.length);
                    pText[i].innerHTML = pText[i].innerHTML.slice(0, 40) + "......";
                }
            }
        });
    },
    methods: {
        cancel_dingdan:function(e){
            console.log(e.currentTarget);
            $(".reward1").show();
        },
    },
    destroyed() {
        $("#one").removeClass("aBorder");
    },
});
Vue.component('two', {
    template: '#tmp2',
    mounted() {
        $(document).ready(function () {
            $("#two").addClass("aBorder"); // 切换组件时，a标签的下划线

            // 通过切换类，来设置单个订单的选中和未选中状态
            $(".imgContainerG").click(function () {
                $(this).toggleClass("imgContainerR");
            });
            // 设置在文字过多时使用省略号代替
            var pText = $(".rightContentLeft > p");
            for (var i = 0; i < pText.length; i++) {
                if (pText[i].innerHTML.length > 40) {
                    console.log(pText[i].innerHTML.length);
                    pText[i].innerHTML = pText[i].innerHTML.slice(0, 40) + "......";
                }
            }
        });
    },
    methods: {
        cancel_dingdan:function(e){
            console.log(e.currentTarget);
            $(".reward1").show();
        },
    },
    destroyed() {
        $("#two").removeClass("aBorder");
    },
});
Vue.component('three', {
    template: '#tmp3',
    mounted() {
        $(document).ready(function () {
            $("#three").addClass("aBorder"); // 切换组件时，a标签的下划线

            // 通过切换类，来设置单个订单的选中和未选中状态
            $(".imgContainerG").click(function () {
                $(this).toggleClass("imgContainerR");
            });
            // 设置在文字过多时使用省略号代替
            var pText = $(".rightContentLeft > p");
            for (var i = 0; i < pText.length; i++) {
                if (pText[i].innerHTML.length > 40) {
                    console.log(pText[i].innerHTML.length);
                    pText[i].innerHTML = pText[i].innerHTML.slice(0, 40) + "......";
                }
            }
        });
    },
    methods: {
        liji_tuikuan:function(e){
            console.log(e.currentTarget);
            $(".reward2").show();
        },
    },
    destroyed() {
        $("#three").removeClass("aBorder");
    },
});
Vue.component('four', {
    template: '#tmp4',
    mounted() {
        $(document).ready(function () {
            $("#four").addClass("aBorder"); // 切换组件时，a标签的下划线

            // 通过切换类，来设置单个订单的选中和未选中状态
            $(".imgContainerG").click(function () {
                $(this).toggleClass("imgContainerR");
            });
            // 设置在文字过多时使用省略号代替
            var pText = $(".rightContentLeft > p");
            for (var i = 0; i < pText.length; i++) {
                if (pText[i].innerHTML.length > 40) {
                    console.log(pText[i].innerHTML.length);
                    pText[i].innerHTML = pText[i].innerHTML.slice(0, 40) + "......";
                }
            }
        });
    },
    destroyed() {
        $("#four").removeClass("aBorder");
    },
});
Vue.component('five', {
    template: '#tmp5',
    mounted() {
        $(document).ready(function () {
            $("#five").addClass("aBorder"); // 切换组件时，a标签的下划线

            // 通过切换类，来设置单个订单的选中和未选中状态
            $(".imgContainerG").click(function () {
                $(this).toggleClass("imgContainerR");
            });
            // 设置在文字过多时使用省略号代替
            var pText = $(".rightContentLeft > p");
            for (var i = 0; i < pText.length; i++) {
                if (pText[i].innerHTML.length > 40) {
                    console.log(pText[i].innerHTML.length);
                    pText[i].innerHTML = pText[i].innerHTML.slice(0, 40) + "......";
                }
            }
        });
    },
    destroyed() {
        $("#five").removeClass("aBorder");
    },
});
Vue.component('six', {
    template: '#tmp6',
    mounted() {
        $(document).ready(function () {
            $("#six").addClass("aBorder"); // 切换组件时，a标签的下划线

            // 通过切换类，来设置单个订单的选中和未选中状态
            $(".imgContainerG").click(function () {
                $(this).toggleClass("imgContainerR");
            });
            // 设置在文字过多时使用省略号代替
            var pText = $(".rightContentLeft > p");
            for (var i = 0; i < pText.length; i++) {
                if (pText[i].innerHTML.length > 40) {
                    // console.log(pText[i].innerHTML.length);
                    pText[i].innerHTML = pText[i].innerHTML.slice(0, 40) + "......";
                }
            }
        });
    },
    destroyed() {
        $("#six").removeClass("aBorder");
    },
});

var vm = new Vue({
    el: "#app",
    data: {
        comName: "one",
        cancelFlag: false, // 控制取消订单遮罩层是否显示
        refundFlag: false, // 控制待发货-直接退款是否显示
    },
    created() {
        // 在确认收货页面，传递过来一个参数
        // 在当前页面，获取到参数，设置显示待评价组件
        if(window.location.search[1] == "5"){
            this.comName = "five";
        }
    },
    methods: {

    },
});

$(document).ready(function () {
    // 设置选中和未选中的状态
    var classflag = true;
    $(".chooseAllItems").click(function () {
        $(".chooseAllItems").toggleClass("chooseAllItemsBgc");
        console.log($(".imgContainerG").attr("class"));
        if (classflag) {
            $(".imgContainerG").addClass("imgContainerR");
            classflag = false;
        } else {
            $(".imgContainerG").removeClass("imgContainerR");
            classflag = true;
        }
    });

    // 兼容iphone5/SE屏幕过窄，信息显示不完整的问题
    // console.log($(window).width());
    if ($(window).width() <= 320) {
        $("#look li").text("查看卡密")
        $("#copy li").text("复制导出")
        $("#bufukuan li").text("补付款")
    }

    // 遮罩层的取消和确定 
    $("#cancelDingDan").click(function(){
        $(".reward1").hide();
    });
    $("#confirm").click(function(){
        $(".reward1").hide();
    });
    $("#cancelTuikuan").click(function(){
        $(".reward2").hide();
    });
    $("#confirmTuikuan").click(function(){
        $(".reward2").hide();
    });
});
